<script setup>
import { ref, onMounted, watch } from 'vue'  // 添加 watch 导入
import StatusCard from '../components/StatusCard.vue'
import PieChart from '../components/charts/PieChart.vue'
import BarChart from '../components/charts/BarChart.vue'
import LineChart from '../components/charts/LineChart.vue'
import CrawlerControl from '../components/CrawlerControl.vue'
import { getPriceDistribution, getCategoryTop10, getPriceTrend } from '../api/book'

const priceData = ref([])
const categoryData = ref({
  categories: [],
  counts: []
})
const priceTrendData = ref({
  dates: [],
  prices: [],
  book_id: null,
  book_title: ''
})

const selectedBookId = ref(1)

const fetchPriceDistribution = async () => {
  try {
    const res = await getPriceDistribution()
    priceData.value = res.data
  } catch (error) {
    console.error('获取价格分布失败:', error)
  }
}

const fetchCategoryTop10 = async () => {
  try {
    const res = await getCategoryTop10()
    categoryData.value = res.data
  } catch (error) {
    console.error('获取分类TOP10失败:', error)
  }
}

const fetchPriceTrend = async () => {
  try {
    const res = await getPriceTrend({ book_id: selectedBookId.value, days: 7 })
    priceTrendData.value = res.data
  } catch (error) {
    console.error('获取价格趋势失败:', error)
  }
}

onMounted(() => {
  fetchPriceDistribution()
  fetchCategoryTop10()
  fetchPriceTrend()
})

// 现在 watch 已经被正确导入
watch(selectedBookId, fetchPriceTrend)
</script>

<template>
  <div class="dashboard">
    <h2>数据总览</h2>
    
    <StatusCard />
    
    <el-card shadow="hover" class="control-card">
      <template #header>
        <div class="card-header">
          <span>爬虫控制</span>
        </div>
      </template>
      <CrawlerControl />
    </el-card>
    
    <div class="chart-row">
      <el-card shadow="hover" class="chart-card">
        <template #header>
          <div class="card-header">
            <span>价格分布</span>
          </div>
        </template>
        <PieChart :data="priceData" title="价格分布" />
      </el-card>
      
      <el-card shadow="hover" class="chart-card">
        <template #header>
          <div class="card-header">
            <span>分类商品数量TOP10</span>
          </div>
        </template>
        <BarChart :data="categoryData" title="分类商品数量TOP10" />
      </el-card>
    </div>
    
    <el-card shadow="hover" class="chart-card">
      <template #header>
        <div class="card-header">
          <span>价格波动趋势</span>
          <el-select v-model="selectedBookId" placeholder="选择图书" style="width: 200px;">
            <el-option :value="1" label="我胆小如鼠" />
            <el-option :value="2" label="JavaScript高级程序设计" />
            <el-option :value="3" label="数据结构与算法分析" />
          </el-select>
        </div>
      </template>
      <LineChart 
        :data="priceTrendData" 
        :title="`${priceTrendData.book_title} 7天价格趋势`" 
      />
    </el-card>
  </div>
</template>

<style scoped>
.dashboard {
  padding: 20px;
}

.control-card {
  margin-bottom: 20px;
}

.chart-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.chart-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>